<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">员工待审核</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="210">
          <template scope="s">
            <el-button type="success" v-if="s.row.myState === 1" size="mini" @click="employeeAuditing(s.row)" round>审核</el-button>
            <el-button type="danger" v-if="s.row.myState === 1" size="mini" @click="rejectOpen(s.row)" round>驳回</el-button>
            <el-button type="warning" size="mini" @click="dialogSearchOpen(s.row)" round>轨迹</el-button>
            <el-tag type="success" v-if="s.row.bxSupplierState === 4" class="tag">已审核</el-tag>
            <el-tag type="danger" v-if="s.row.bxSupplierState === 5" class="tag">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-form-item label="姓名" prop="bxSupplierName">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierName"
                    placeholder="姓名" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="账户名称" prop="bxSupplierAccount">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierAccount"
                    placeholder="账户名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="开户行" prop="bxSupplierBank">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierBank"
                    placeholder="开户行" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="bxSupplierBankaccount">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierBankaccount"
                    placeholder="银行账号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="bxSupplierPhone">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierPhone"
                    placeholder="联系方式" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="bxSupplierSelfno">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierSelfno"
                    placeholder="身份证号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="结算周期" prop="bxSupplierSetlecircle">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierSetlecircle"
                    placeholder="结算周期" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="bxSupplierDepartmentname">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierDepartmentname"
                    placeholder="所属部门" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="bxSupplierState">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxSupplierState"
                    placeholder="状态" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        -->
      </s-table>
    </el-card>
    <reject @success="rejectSuccess" ref="reject" type="emplyee"></reject>
    <s-dialog :dialog="dialogUpload">
      <p slot="title">申请审核员工 <span v-if="dialogUpload.row.bxSupplierName">员工名称：{{dialogUpload.row.bxSupplierName}}</span></p>
      <s-form :form="formDialogUpload" ref="formDialogUpload">
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}" class="">
            <el-form-item prop="userId" label="审核人">
              <el-select v-model="formDialogUpload.userId"
                         filterable
                         placeholder="请选择">
                <el-option
                  v-for="item in dialogUpload.userId"
                  :key="item.id"
                  :label="item.name + '   ' + item.orgName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogUploadSave">保存</el-button>
    </s-dialog>
    <process ref="process"></process>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';
  function __formDialogUpload () {
    return {
      userId: { value: '', rule: ['vNull'], cRemarks: '' },
    };
  }

  function __form () {
    return {
      id: { value: '', rule: [], cRemarks: '' },
      bxSupplierName: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bxSupplierSelfno: { value: '', rule: [ 'vNull', 'v_IDCard' ], cRemarks: '员工' },
      bxSupplierPhone: { value: '', rule: [], cRemarks: '' },
      bxSupplierDepartmentname: { value: '', rule: [], cRemarks: '' },
      bxSupplierDepartmentid: { value: [], rule: [ 'vNull__change' ], cRemarks: '' },
      bxSupplierSetlecircle: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bxSupplierAccount: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bxSupplierBank: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bxSupplierBankaccount: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bxSupplierState: { value: '', rule: [], cRemarks: '' },
    };
  }
  export default AutoVue({
    data: {
      table: {
        column: [
          { label: '姓名',
            prop: 'bxSupplierName',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '身份证号',
            prop: 'bxSupplierSelfno',
            minWidth: '0px',
            cRemarks: '员工',
            search: true },
          { label: '联系方式',
            prop: 'bxSupplierPhone',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '所属部门',
            prop: 'bxSupplierDepartmentname',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '结算周期',
            prop: 'show_bxSupplierSetlecircle',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '账户名称',
            prop: 'bxSupplierAccount',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '开户行',
            prop: 'bxSupplierBank',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '银行账号',
            prop: 'bxSupplierBankaccount',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '状态',
            prop: 'show_bxSupplierState',
            minWidth: '0px',
            cRemarks: '',
            search: true },
        ],
        key: 'id',
        url: '/empolyee/searchWaitByPage',
        tableColumn: 4,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        bxSupplierDepartmentid: [],
        bxSupplierSetlecircle: [],
        width: '80%',
      },
      dialogUpload: {
        row: {},
        ids: [],
        userId: [],
      },
      formDialogUpload: __formDialogUpload(),
    },
    transition: 'slide-fade-bottom',
    head: {
      'title': '员工待审核',
      'meta': [
        {'hid': 'description', 'name': 'description', 'content': '乐速科技平台 资源管理 查看员工待审核'},
      ],
    },
    methods: {
      employeeAuditing (row) {
        if (!row.end) {
          this.dialogUploadOpen([], row);
        } else {
          this.$confirm('您将审批员工。', '确认审批？', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          }).then(async () => {
            await this.get('/empolyee/review/' + row.id);
            this.tableWatch('table');
          });
        }
      },
      employeeReject (row) {
        this.$confirm('您将驳回员工。', '确认驳回？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          await this.get('/empolyee/reject/' + row.id);
          this.tableWatch('table');
        });
      },

      rejectOpen (row) {
        this.$refs.reject.open(row);
      },
      rejectSuccess (json) {
        this.tableWatch('table');
      },

      async dialogUploadOpen (ids, row) {
        let {contentList} = await this.get('/workflowConfig/selectAuditors/' + row.id);
        this.dialogUpload.userId = contentList;
        this.dialogUpload.row = row;
        this.dialogUpload.ids = ids;
        this.dialogUpload.visible = true;
      },
      dialogUploadSave () {
        this.VALIDATE('formDialogUpload', async option => {
          try {
            await this.post('/empolyee/readyreview', {
              ...option,
              id: this.dialogUpload.row.id,
            });
            this.dialogUpload.dialogInit.call(this);
            this.tableWatch('table');
          } catch (err) {
            console.error(err);
          }
        });
      },
      dialogSearchOpen (row) {
        this.$refs.process.open(row);
      },
    },
    mounted: function () {
      this.tableWatch('table');
      console.log(this);
    },
  });
</script>
